import React from 'react';
import Tabs from "react-bootstrap/lib/Tabs";
import Tab from "react-bootstrap/lib/Tab";
import ProjectInfoTab from "./projectInfo.jsx";
import CertManageTab from './certManage.jsx';
import DataSourceManageTab from './dataSourceManagement.jsx';
import MemberManageTab from './memberManagement.jsx';
import BasicTable from './../basic_table.jsx';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import WorkspaceManageTab from '../workspace/workspaceManagement.jsx';


//const tab = {
//    background: "#ccc",
//    width: "100%",
//    borderColor: "white",
//    borderWidth: "0px",
//    borderTopStyle: "solid",
//    height:"70px",
//
//    marginTop: "20px"
//    //bottom: "0px",
//    //height:"20px"
//};

const body = {
    width: "100%",
    height:"750px",
    top: "200px",
    bottom: "40px",
};
var ProjectManageTab = React.createClass({
    getInitialState: function () {
        return ({
            activeTab:0,
            current_project:this.props.project
        });
    },
    componentWillReceiveProps (newProps){
        this.setState({
            current_project:newProps.project
        });
    },

    _getTabView(){
        let tabView = null;
        let index = this.state.activeTab;
        switch(index){
            case 0: tabView = <ProjectInfoTab current_project={this.state.current_project}/>;break;
            case 1: tabView = <CertManageTab current_project={this.state.current_project}/>;break;
            //case 2: tabView = <DataSourceManageTab current_project={this.state.current_project}/>;break;
            case 2: tabView = <WorkspaceManageTab current_project={this.state.current_project}/>;break;
            case 3: tabView = <MemberManageTab current_project={this.state.current_project}/>;break;
        }
        this.tabView = tabView;
        return tabView;
    },

    _handleTabSelect(selectedKey){
        switch(selectedKey){
            case 0: this.setState({activeTab:0});break;
            case 1: this.setState({activeTab:1});break;
            case 2: this.setState({activeTab:2});break;
            case 3: this.setState({activeTab:3});break;
        }
    },
    render() {

        return (
        <div style={{width:"100%",height:"100%"}}>
            <div className="tab">
                <div className="tab_nav">
                    <div className={"tab_navItem tab_navItemFirst " + (this.state.activeTab==0?"tab_active":"")} onClick={this._handleTabSelect.bind(this, 0)}>
                        <span>项目管理</span>
                        <div className="tab_triangle_border_down">
                            <span></span>
                        </div>
                    </div>
                    <div className={"tab_navItem tab_navItemCenter " + (this.state.activeTab==1?"tab_active":"")} onClick={this._handleTabSelect.bind(this, 1)}>

                        <span>证书管理</span>
                        <div className="tab_triangle_border_down">
                            <span></span>
                        </div>
                    </div>

                    <div className={"tab_navItem tab_navItemCenter " + (this.state.activeTab==3?"tab_active":"")} onClick={this._handleTabSelect.bind(this, 3)}>

                        <span>成员管理</span>
                        <div className="tab_triangle_border_down">
                            <span></span>
                        </div>
                    </div>
                    <div className={"tab_navItem tab_navItemLast " + (this.state.activeTab==2?"tab_active":"")} onClick={this._handleTabSelect.bind(this, 2)}>

                        <span>工作空间管理</span>
                        <div className="tab_triangle_border_down">
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="tab_content">
                {this._getTabView()}
            </div>
         </div>


        );
    }
});

export default ProjectManageTab;